import React,{Component} from 'react'
import {
    Card,
    Icon,
    Form,
    Input,
    Cascader,//级联组件
    Upload, //上传组件
    Button,
    message,
} from 'antd'
import LinkButton from '../../components/link-button'
const {Item}=Form
const {TextArea}=Input

export default class Add extends Component{
    render(){
        //card左
        const title=(
            <span>
                <LinkButton>
                    <Icon type='arrow-left' style={{fontSize:20}} />
                </LinkButton>
                <span>添加商品</span>
            </span>
        )

        //form内的Item的布局样式
        const formItemLayout = {
            labelCol: {span: 2}, //左侧label标签的宽度占2个格栅
            wrapperCol: {span: 8 }, //右侧（输入框外面有一层包裹）占8个格栅
        };
        return(
            <Card title={title} extra=''>
                {/* 使用组件的扩展属性语法 */}
                <Form {...formItemLayout}>
                    {/* label指定商品前面标签名,placeholder指定输入框提示内容 */}
                    <Item label='商品名称'>
                        <Input  placeholder='输入商品名' />
                    </Item>

                    <Item label='商品描述'>
                        {/* autoSize指定文本域最小高度和最大高度 */}
                        <TextArea placeholder='输入商品描述' autoSize={{ minRows: 2, maxRows: 6 }} />
                    </Item>

                    <Item label='商品价格'>
                        <Input type='number' placeholder='输入商品价格' addonAfter="元" />
                    </Item>

                    <Item label='商品分类'>
                        <Input placeholder='输入商品分类' />
                    </Item>

                    <Item label='商品图片'>
                        <Input placeholder='输入商品图片' />
                    </Item>

                    <Item label='商品详情'>
                        <Input placeholder='输入商品详情' />
                    </Item>

                    <Item >
                        <Button type='primary'>提交</Button>
                    </Item>

                </Form>
            </Card>
        )
    }
}

